<!--
 * @Author: 孙大大
 * @Date: 2022-04-09 03:48:36
 * @LastEditTime: 2022-04-14 02:23:56
 * @FilePath: \黑马面面111\src\views\questions\new.vue
-->
<template>
  <div class="dashboard-container">
    <div class="app-container">
      <el-card class="box-card">
        <div slot="header" class="clearfix">
          <span>试题录入</span>
        </div>

        <el-form :model="form" ref="form" :rules="rules" label-width="100px">
          <el-form-item required label="学科" prop="subjectID">
            <el-select
              placeholder="请选择"
              class="basic_style"
              v-model="form.subjectID"
              @change="subjectChange($event)"
            >
              <el-option
                v-for="item in SubjectsList.items"
                :key="item.id"
                :label="item.subjectName"
                :value="item.id"
              ></el-option>
            </el-select>
          </el-form-item>

          <el-form-item required label="目录" prop="catalogID">
            <el-select
              placeholder="请选择"
              class="basic_style"
              v-model="form.catalogID"
            >
              <el-option
                v-for="item in Mune.items"
                :key="item.id"
                :label="item.directoryName"
                :value="item.id"
              ></el-option>
            </el-select>
          </el-form-item>

          <el-form-item required label="企业" prop="enterpriseID">
            <el-select
              placeholder="请选择"
              class="basic_style"
              v-model="form.enterpriseID"
            >
              <el-option
                v-for="item in CompanyList.items"
                :key="item.id"
                :label="item.company"
                :value="item.id"
              ></el-option>
            </el-select>
          </el-form-item>

          <el-form-item required label="城市" prop="province">
            <el-select
              style="margin-right: 20px"
              v-model="form.province"
              @change="changeProvince"
            >
              <el-option
                v-for="(item, index) in provincesList"
                :key="index"
                :label="item"
                :value="item"
              ></el-option>
            </el-select>
            <el-select v-model="form.city">
              <el-option
                v-for="(item, index) in citysList"
                :key="index"
                :label="item"
                :value="item"
              ></el-option>
            </el-select>
          </el-form-item>

          <el-form-item required label="方向" prop="direction">
            <el-select
              v-model="form.direction"
              placeholder="请选择"
              class="basic_style"
            >
              <el-option label="o2o" value="o2o"></el-option>
              <el-option label="外包服务" value="外包服务"></el-option>
              <el-option label="企业服务" value="'企业服务'"></el-option>
              <el-option label="互联网金融" value="互联网金融"></el-option>
              <el-option label="企业咨询" value="企业咨询"></el-option>
              <el-option label="互联网" value="互联网"></el-option>
              <el-option label="电子商务" value="电子商务"></el-option>
              <el-option label="其它" value="其它"></el-option>
            </el-select>
          </el-form-item>

          <el-form-item required label="题型" prop="questionType">
            <el-radio v-model="form.questionType" label="1">单选</el-radio>
            <el-radio v-model="form.questionType" label="2">多选</el-radio>
            <el-radio v-model="form.questionType" label="3">简答</el-radio>
          </el-form-item>

          <el-form-item required label="难度" prop="difficulty">
            <el-radio v-model="form.difficulty" label="1">简单</el-radio>
            <el-radio v-model="form.difficulty" label="2">一般</el-radio>
            <el-radio v-model="form.difficulty" label="3">困难</el-radio>
          </el-form-item>

          <el-form-item required label="题干">
            <Editor @getData="getData"></Editor>
          </el-form-item>
          <br />

          <!-- 单选选项 -->
          <el-form-item label="选项" style="margin-top: 80px">
            <el-radio-group v-model="radio" @change="RadioChange">
              <el-radio :label="1" style="margin-bottom: 40px"
                >A：
                <el-input
                  v-model="form.options[0].title"
                  placeholder="请输入内容"
                  style="width: 240px; height: 40px"
                ></el-input>
                <el-upload
                  style="float: right"
                  class="avatar-uploader"
                  action="https://jsonplaceholder.typicode.com/posts/"
                >
                  <i class="avatar-uploader-icon">上传图片</i>
                </el-upload> </el-radio
              ><br />

              <el-radio :label="2" style="margin-bottom: 40px"
                >B：
                <el-input
                  v-model="form.options[1].title"
                  placeholder="请输入内容"
                  style="width: 240px; height: 40px"
                ></el-input>
                <el-upload
                  style="float: right"
                  class="avatar-uploader"
                  action="https://jsonplaceholder.typicode.com/posts/"
                >
                  <i class="avatar-uploader-icon">上传图片</i>
                </el-upload> </el-radio
              ><br />

              <el-radio :label="3" style="margin-bottom: 40px"
                >C：
                <el-input
                  v-model="form.options[2].title"
                  placeholder="请输入内容"
                  style="width: 240px; height: 40px"
                ></el-input>
                <el-upload
                  style="float: right"
                  class="avatar-uploader"
                  action="https://jsonplaceholder.typicode.com/posts/"
                >
                  <i class="avatar-uploader-icon">上传图片</i>
                </el-upload> </el-radio
              ><br />

              <el-radio :label="4" style="margin-bottom: 40px"
                >D：
                <el-input
                  v-model="form.options[3].title"
                  placeholder="请输入内容"
                  style="width: 240px; height: 40px"
                ></el-input>
                <el-upload
                  style="float: right"
                  class="avatar-uploader"
                  action="https://jsonplaceholder.typicode.com/posts/"
                >
                  <i class="avatar-uploader-icon">上传图片</i>
                </el-upload> </el-radio
              ><br />
            </el-radio-group>
          </el-form-item>
          <!-- 单选选项 -->

          <!-- 多选选项 -->
          <!-- <el-form-item label="选项" style="margin-top: 40px">
            <el-checkbox-group v-model="list">
              <el-checkbox style="margin-bottom: 40px"
                >A：
                <el-input
                  placeholder="请输入内容"
                  style="width: 240px; height: 40px"
                ></el-input>
                <el-upload
                  style="float: right"
                  class="avatar-uploader"
                  action="https://jsonplaceholder.typicode.com/posts/"
                >
                  <i class="avatar-uploader-icon">上传图片</i>
                </el-upload> </el-checkbox
              ><br />

              <el-checkbox style="margin-bottom: 40px"
                >A：
                <el-input
                  placeholder="请输入内容"
                  style="width: 240px; height: 40px"
                ></el-input>
                <el-upload
                  style="float: right"
                  class="avatar-uploader"
                  action="https://jsonplaceholder.typicode.com/posts/"
                >
                  <i class="avatar-uploader-icon">上传图片</i>
                </el-upload> </el-checkbox
              ><br />

              <el-checkbox style="margin-bottom: 40px"
                >A：
                <el-input
                  placeholder="请输入内容"
                  style="width: 240px; height: 40px"
                ></el-input>
                <el-upload
                  style="float: right"
                  class="avatar-uploader"
                  action="https://jsonplaceholder.typicode.com/posts/"
                >
                  <i class="avatar-uploader-icon">上传图片</i>
                </el-upload> </el-checkbox
              ><br />

              <el-checkbox style="margin-bottom: 40px"
                >A：
                <el-input
                  placeholder="请输入内容"
                  style="width: 240px; height: 40px"
                ></el-input>
                <el-upload
                  style="float: right"
                  class="avatar-uploader"
                  action="https://jsonplaceholder.typicode.com/posts/"
                >
                  <i class="avatar-uploader-icon">上传图片</i>
                </el-upload> </el-checkbox
              ><br />
            </el-checkbox-group>
          </el-form-item> -->
          <!-- /多选选项 -->

          <!-- 简答题 -->
          <!-- <el-form-item label="选项"> </el-form-item> -->
          <!-- /简答题 -->

          <!-- 是否添加按钮 -->
          <el-form-item>
            <el-button type="danger" disabled>+增加选项与答案</el-button>
          </el-form-item>
          <!-- /是否添加按钮 -->

          <el-form-item label="解析视频">
            <el-input class="basic_style" v-model="form.videoURL"></el-input>
          </el-form-item>

          <el-form-item required label="答案解析">
            <Editor1 @getData1="getData1"></Editor1>
          </el-form-item>
          <br />

          <el-form-item label="题目备注" style="margin-top: 40px">
            <el-input
              v-model="form.remarks"
              class="basic_style"
              type="textarea"
              placeholder="请输入内容"
            >
            </el-input>
          </el-form-item>

          <el-form-item required label="试题标签">
            <el-select
              multiple
              placeholder="请选择"
              class="basic_style"
              v-model="tags"
            >
              <el-option
                v-for="item in tagsList.items"
                :key="item.id"
                :label="item.tagName"
                :value="item.id"
              ></el-option>
            </el-select>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="submitForm">确认提交</el-button>
          </el-form-item>
        </el-form>
      </el-card>
    </div>
  </div>
</template>

<script>
import Editor from "./new/Editor.vue";
import Editor1 from "./new/Editor1.vue";
import {
  getSubjects,
  getMune,
  getTags,
  getCompany,
  addQusetions,
} from "@/api/questions";
import { provinces, citys } from "@/api/citys";
export default {
  components: { Editor, Editor1 },

  data() {
    return {
      radio: "",
      list: [],
      Mune: {},
      tags: "",
      tagsList: {},
      CompanyList: {},
      // 省数据列表
      provincesList: [],
      // 市数据列表
      citysList: [],
      SubjectsList: {
        items: [],
      },
      SubjectId: "",
      subjectName: "",
      directoryName: "",
      tagName: [],
      company: "",

      form: {
        answer: "",
        catalogID: null,
        city: "",
        citys: "",
        difficulty: "1",
        direction: "",
        enterpriseID: null,
        id: null,
        options: [
          { code: 65, title: "", img: "", isRight: false },
          { code: 66, title: "", img: "", isRight: false },
          { code: 67, title: "", img: "", isRight: false },
          { code: 68, title: "", img: "", isRight: false },
        ],
        province: "",
        question: "",
        questionType: "1",
        remarks: "",
        subjectID: null,
        tags: "",
        videoURL: "",
      },
      rules: {
        subjectID: [
          { required: true, message: "必选项不能为空", trigger: "change" },
        ],
        catalogID: [
          { required: true, message: "必选项不能为空", trigger: "change" },
        ],
        enterpriseID: [
          { required: true, message: "必选项不能为空", trigger: "change" },
        ],
        province: [
          { required: true, message: "必选项不能为空", trigger: "blur" },
        ],
        direction: [
          { required: true, message: "必选项不能为空", trigger: "change" },
        ],
        questionType: [
          { required: true, message: "必选项不能为空", trigger: "change" },
        ],
        difficulty: [
          { required: true, message: "必选项不能为空", trigger: "change" },
        ],
      },
    };
  },
  created() {
    this.getSubjectsList();
    this.getCompanyList();
    this.provinces();
    console.log("这是路由跳转传的值", this.$route.query.qusetionList);
    this.form.videoURL = this.$route.query.qusetionList.videoURL;
    this.form.remarks = this.$route.query.qusetionList.remarks;
    this.form.difficulty = "2";
    this.form.direction = this.$route.query.qusetionList.direction;
    this.form.answer = this.$route.query.qusetionList.answer;
    this.form.city = this.$route.query.qusetionList.city;
    this.form.province = "北京市";
    this.form.question = this.$route.query.qusetionList.question;
    this.tags = this.$route.query.qusetionList.tags;
    this.enterpriseID = this.$route.query.qusetionList.enterpriseID;
    this.SubjectsList.items[0].subjectName = this.$route.query.subject;
    this.form.options[1].title = '请问你如何看待"科技"？';
  },
  // 把数字型的tags转换成字符串
  updated() {
    this.form.tags = this.tags.toString();
  },
  methods: {
    // 获取/初始化页面数据
    getSubjectsList() {
      getSubjects().then((res) => {
        this.SubjectsList = res;
        console.log("用于学科的数据", this.SubjectsList);
      });
    },
    // 获取公司列表
    getCompanyList() {
      getCompany().then((res) => {
        this.CompanyList = res;
        console.log("公司的列表数据", this.CompanyList);
      });
    },
    // 获取目录下的子节点
    subjectChange(e) {
      console.log(e);
      // 拿到学科对应的目录数据
      getMune(e).then((res) => {
        this.Mune = res;
        console.log("用于目录的数据", this.Mune);
      });
      // 拿到学科对应的标签数据
      getTags(e).then((res) => {
        console.log("拿到标签数据", res);
        this.tagsList = res;
        console.log("@@@", this.tagsList);
        // this.form.tags = res.items;
        // console.log("用于标签的数据", this.form.tags);
      });
    },
    // 获取省列表
    provinces() {
      this.provincesList = provinces();
    },
    // 切换时获取市列表
    changeProvince() {
      this.form.city = "";
      this.citysList = citys(this.form.province);
    },
    // 单选选项触发时的事件
    RadioChange(e) {
      if (e == 1) {
        this.form.options[0].isRight = true;
        this.form.options[1].isRight = false;
        this.form.options[2].isRight = false;
        this.form.options[3].isRight = false;
        // console.log("1", this.form.options[0].isRight);
      } else if (e == 2) {
        this.form.options[0].isRight = false;
        this.form.options[1].isRight = true;
        this.form.options[2].isRight = false;
        this.form.options[3].isRight = false;
        // console.log("2", this.form.options[1].isRight);
      } else if (e == 3) {
        this.form.options[0].isRight = false;
        this.form.options[1].isRight = false;
        this.form.options[2].isRight = true;
        this.form.options[3].isRight = false;
        // console.log("3", this.form.options[2].isRight);
      } else if (e == 4) {
        this.form.options[0].isRight = false;
        this.form.options[1].isRight = false;
        this.form.options[2].isRight = false;
        this.form.options[3].isRight = true;
        // console.log("4", this.form.options[3].isRight);
      }
    },
    // 获取题干的内容数据
    getData(data) {
      this.form.question = data;
    },
    // 获取答案解析的内容数据
    getData1(data) {
      this.form.answer = data;
    },
    // 添加试题，表单提交
    async submitForm() {
      this.$refs.form.validate(async (valid) => {
        if (valid) {
          await addQusetions(this.form);
          this.$message.success("录入成功");
          this.$refs.form.resetFields();
          this.form = this.$options.data().form;
          this.tags = "";
          this.radio = 1;
          this.$router.push("/tiku/guanli");
        } else {
          console.log("error submit!!");
          return false;
        }
      });
      // try {
      //   await addQusetions(this.form);
      // } catch (error) {
      //   console.log(error);
      //   this.$message.error("添加失败");
      // }
    },
  },
};
</script>

<style lang="less">
.basic_style {
  width: 400px;
  height: 40px;
}

.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  left: 10px;
  top: -5px;
  overflow: hidden;
}
.avatar-uploader .el-upload:hover {
  border-color: #409eff;
}
.avatar-uploader-icon {
  display: inline-block;
  font-size: 16px;
  color: #000;
  width: 100px;
  height: 60px;
  line-height: 60px;
  text-align: center;
}
</style>
